<template>
  <div class="goods-container">
    <!-- 显示 -->
    <el-card shadow="always">
      <!-- 第一行，按钮（添加货物）和搜索框 -->
      <el-row :gutter="24">
        <!-- 按钮，添加货物 -->
        <el-col :span="18">
          <el-button
            type="primary"
            size="small"
            @click="showDrawer()"
          >添加货物</el-button>
        </el-col>
        <!-- 输入框，搜索表格内容 -->
        <el-col :span="6">
          <el-input
            v-model="input"
            placeholder="请输入内容"
            prefix-icon="el-icon-search"
            size="small"
            @keyup.enter.native="getList()"
          />
        </el-col>
      </el-row>

      <!-- 第二行，表格显示货物信息 -->
      <el-table
        size="small"
        :data="list"
        style="width: 100%; margin: 15px 0px"
        border
      >
        <!-- 展开行 -->
        <el-table-column type="expand">
          <template slot-scope="{ row }">
            <el-form :model="row">
              <el-form-item label="货物规格">
                <!-- 标签，货物规格 -->
                <el-tag v-for="label in row.labels" :key="label.id">{{
                  label.name
                }}</el-tag>
              </el-form-item>
              <el-form-item label="货物备注">{{ row.others }}</el-form-item>
            </el-form>
            <!-- 跑马灯，展示货物图片 -->
            <el-carousel :interval="3000" type="card" height="400px">
              <el-carousel-item v-for="image in row.images" :key="image.id">
                <el-image :src="image.url" fit="fill" />
              </el-carousel-item>
            </el-carousel>
          </template>
        </el-table-column>
        <!-- 表格字段 -->
        <el-table-column
          label="名称"
          align="center"
          width="150px"
          prop="name"
        />
        <el-table-column
          label="单位"
          align="center"
          width="50px"
          prop="unit.name"
        />
        <el-table-column
          label="品牌"
          align="center"
          width="100px"
          prop="brand.name"
        />
        <el-table-column label="默认进价" align="center" width="80px">
          <template slot-scope="{ row }">
            {{ row.inPrice.toFixed(2) }}
          </template></el-table-column>
        <el-table-column
          label="默认出价"
          align="center"
          width="80px"
        ><template slot-scope="{ row }">
          {{ row.outPrice.toFixed(2) }}
        </template></el-table-column>

        <el-table-column
          label="默认仓库"
          align="center"
          width="100px"
          prop="warehouse.name"
        />

        <el-table-column
          label="默认分区"
          align="center"
          width="50px"
          prop="warehouseArea.name"
        />

        <el-table-column
          label="默认库位"
          align="center"
          width="50px"
          prop="warehousePosition.name"
        />
        <el-table-column label="状态" align="center" width="70px">
          <template slot-scope="{ row }">
            <el-tag :type="row.flag ? 'success' : 'danger'">{{
              row.flag ? "启用" : "禁用"
            }}</el-tag>
          </template>
        </el-table-column>
        <!-- 货物操作 -->
        <el-table-column label="操作" align="center">
          <template slot-scope="{ row }">
            <el-tooltip
              class="item"
              effect="dark"
              content="查看货物xx"
              placement="bottom"
            >
              <el-button icon="el-icon-search" circle />
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="dark"
              content="修改货物信息"
              placement="bottom"
            >
              <el-button
                type="primary"
                icon="el-icon-edit"
                circle
                @click="modify(row)"
              />
            </el-tooltip>
            <!-- <el-tooltip
              class="item"
              effect="dark"
              content="删除货物信息"
              placement="bottom"
            >
              <el-button
                type="danger"
                icon="el-icon-delete"
                circle
                @click="deleteItem(row)"
              />
            </el-tooltip> -->
          </template>
        </el-table-column>
      </el-table>
      <!-- 抽屉1，添加|修改品牌信息 -->
      <Drawer ref="drawer" @getList="getList()" />
    </el-card>
  </div>
</template>

<script>
import Drawer from '@/views/information/goods/components/Drawer'

export default {
  name: 'Goods',
  components: {
    Drawer
  },
  data() {
    return {
      // 货物信息列表
      list: [],
      // 关键字
      input: ''
    }
  },
  mounted() {
    // 获取货物信息
    this.getList()
  },
  methods: {
    // 添加货物
    showDrawer() {
      // 调用子组件添加单位方法，显示右侧弹窗
      this.$refs.drawer.drawerFormOn()
      // 修改子组件drawerForm内容
      this.$nextTick(async() => {
        this.$refs['drawer'].areas = []
        this.$refs['drawer'].positions = []
      })
    },
    // 获取货物信息列表
    async getList() {
      const response = await this.$API.goods.get()
      if (response.code === 200) {
        // 保存数据
        this.list = response.data
      } else {
        // 数据获取失败，弹窗提醒
        this.$message.error(response.msg)
      }
    },
    // 修改货物信息
    modify(row) {
      // 调用子组件添加单位方法，显示右侧弹窗
      this.$refs.drawer.drawerFormOn()
      // 修改子组件drawerForm内容
      this.$nextTick(async() => {
        this.$refs['drawer'].drawerForm.id = row.id
        this.$refs['drawer'].drawerForm.name = row.name
        this.$refs['drawer'].drawerForm.labels = row.labels
        this.$refs['drawer'].drawerForm.images = row.images
        this.$refs['drawer'].drawerForm.brand = row.brand.id
        this.$refs['drawer'].drawerForm.unit = row.unit.id
        this.$refs['drawer'].drawerForm.inPrice = row.inPrice
        this.$refs['drawer'].drawerForm.outPrice = row.outPrice
        this.$refs['drawer'].drawerForm.warehouse = row.warehouse.id
        this.$refs['drawer'].drawerForm.warehouseArea = row.warehouseArea.id
        this.$refs['drawer'].drawerForm.warehousePosition = row.warehousePosition.id
        this.$refs['drawer'].drawerForm.flag = row.flag
        this.$refs['drawer'].drawerForm.others = row.others
        // 修改的时候才需要调用接口拉取分区、库位信息
        const responseA2 = await this.$API.goods.getArea(row.warehouse.id)
        this.$refs['drawer'].areas = responseA2.data

        const responseA3 = await this.$API.goods.getPosition(row.warehouseArea.id)
        this.$refs['drawer'].positions = responseA3.data
      })
    },
    // 删除货物信息
    deleteItem(row) {
      this.$confirm('此操作将永久删除该货物信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        const response = await this.$API.customer.deleteWarehouse(row.id)
        if (response.code === 200) {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          // 重新拉取货物信息
          this.getList()
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }
}
</script>

<style lang='scss' scoped>
.goods {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>

// 展开行样式
<style>
.demo-table-expand {
  font-size: 0px;
}
.demo-table-expand label {
  font-weight: 400;
  font-size: 14px;
  margin-left: 15px;
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 100%;
}
</style>

// 跑马灯样式
<style>
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>
